<template>
  <div class="vuex-panel">
    <!-- 标题栏 -->
    <div class="panel-title">
      <p class="title-t">{{$t('cmlpanel.console_config')}}</p>
      <div class="search">
        <input class="search-input"
          type="text"
          v-model.trim="filter"
          placeholder="Filter State">
      </div>
      <!-- 路径 -->
      <ul class="path-list">
        <li class="path-item"
          @click="shuttle">state</li>
        <li v-for="(p, i) in path"
          :key="i"
          @click="shuttle(p)"
          class="path-item">{{p}}</li>
      </ul>
      <!-- 操作区域 -->
      <button class="btn btn-bl back"
        title="返回上一级"
        :disabled='path.length === 0'
        @click="lastStep"><i class="platformicon icon_fanhui"></i></button>
      <button class="btn btn-bl close"
        title="关闭"
        @click="closeStatePanel"><i class="platformicon icon_guanbimianban"></i></button>
    </div>
    <!-- 内容区域 -->
    <div class="body">
      <div class="last-step"
        v-show="path.length !== 0"
        @click="lastStep">
        <button class="btn"
          title="上一级">
          <i class="platformicon icon_dakaimianban"></i>
        </button>
      </div>
      <ul class="list">
        <vuex-item v-for="(value, key) in filteredState"
          :key="key"
          :dataItem="value"
          :dataName='key'
          :path='path'
          @select="select"
          @open-add='openAdd'></vuex-item>
        <add-item v-if="isAdd"
          ref="addItem"
          :parentState="filteredState"
          @cancel-add='cancelAdd'
          @submit-add='submitAdd'></add-item>
        <li v-else
          class="item">
          <button class="add-item-btn"
            title="添加属性"
            @click.stop="openAdd">
            <a-icon type="plus-circle"
              theme='filled'
              style="font-size:14px;" />
          </button>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import { Icon } from 'ant-design-vue'
import { searchDeepInObject, sortByKey } from './util'
import VuexItem from './vuex-item.vue'
import AddItem from './add-item.vue'
// 控制台 zhu18-9-25
export default {
  name: 'VuexList',
  components: { VuexItem, AddItem, [Icon.name]: Icon },
  data() {
    return {
      states: null,
      // 对象的访问路径
      path: [],
      // 搜索
      filter: '',
      // 添加数据
      isAdd: false
    }
  },
  wacth: {},
  computed: {
    // 当前展示的数据
    currentShow() {
      let len = this.path.length,
        cache = this.states
      for (let i = 0; i < len; i++) {
        cache = cache[this.path[i]]
      }
      return cache
    },
    // 搜索
    filteredState() {
      const inspectedState = this.$store.state

      const getProcessedState = (state) => {
        if (!Array.isArray(state)) {
          return Object.keys(state).map((key) => ({
            key,
            value: state[key]
          }))
        } else {
          return state
        }
      }

      const result = [].concat(...getProcessedState(inspectedState))

      let stateArr = sortByKey(
        result.filter((el) =>
          searchDeepInObject(
            {
              [el.key]: el.value
            },
            this.filter
          )
        )
      )
      let cache = {}
      stateArr.map((s) => {
        cache[s.key] = s.value
      })
      let len = this.path.length
      for (let i = 0; i < len; i++) {
        cache = cache[this.path[i]]
      }
      return cache
    }
  },
  mounted() {
    this.states = this.$store.state
  },
  methods: {
    ...mapMutations('cmlpanel', ['setConsolePanelVuex']),
    // 选中某一个value
    select(key, type) {
      this.path.push(key)
    },
    // 上一步
    lastStep() {
      this.path.pop()
      // 如果有新增属性，则关闭
      this.isAdd = false
    },
    // 在不同层级中穿梭
    shuttle(step) {
      this.path.splice(this.path.indexOf(step) + 1)
      if (typeof step === 'object') {
        this.path = []
      }
    },
    // 关闭
    closeStatePanel() {
      this.setConsolePanelVuex(false)
    },
    openAdd() {
      this.isAdd = true
      this.$nextTick(() => {
        this.$refs.addItem.$el.scrollIntoView()
      })
    },
    cancelAdd() {
      this.isAdd = false
    },
    submitAdd(data) {
      this.$store.dispatch('cmlpanel/ADD_VUEX_BY_PATH', {
        path: this.path,
        ...data
      })
      this.isAdd = false
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../style/panel-var.scss';
@import '../../style/panel-mixin.scss';
$border-color: #a2d5d226;
.btn {
  height: 12px;
  padding: 0 10px;
  border: none;

  color: #c1fffb66;
  background: transparent;

  font-size: $fz-ssm;
  line-height: 1;
  &:hover {
    color: #c1fffbb3;
  }
  i {
    font-size: 12px;
  }
}
.btn-bl {
  border-left: 1px solid #c1fffb66;
}
button[disabled] {
  color: gray;

  cursor: not-allowed;
  &:hover {
    color: gray;
  }
}
.vuex-panel {
  flex: 1;
  overflow: auto;

  width: 100%;

  color: $text-color;

  font-family: Menlo, Monaco, 'Courier New', monospace;
  .panel-title {
    height: 24px;
    padding-left: 10px;
    box-sizing: border-box;

    // color: #999;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    background: #171515c4;

    @include flex(row, space-between);
    .title-t {
      margin-right: 10px;

      white-space: nowrap;
    }
    .search {
      height: 23px;
      padding-top: 2px;
      .search-input {
        height: 19px;
        padding: 0 5px;
        border: none;
        border-radius: 2px;

        color: #c1fffb;
        background-color: #272f2f;
        &:focus {
          background-color: #384343;
        }
      }
      input::-webkit-input-placeholder {
        color: gray;

        font-size: 12px;
      }
    }
    .path-list {
      margin-right: 10px;
      margin-left: auto;

      @include flex(row, flex-end);

      .path-item {
        opacity: 0.4;

        font-size: $fz-ssm;
        line-height: 1;

        transition: all ease 0.2s;

        cursor: pointer;
        &:after {
          content: '/';
        }
        &:nth-last-child(1) {
          opacity: 0.7;
          &:after {
            content: '';
          }
        }
        &:hover {
          opacity: 0.9;
        }
      }
    }
  }
  .body {
    overflow: auto;

    height: calc(100% - 24px);
  }
  .last-step {
    display: flex;
    align-items: center;

    position: sticky;
    top: 0;
    z-index: 1;

    height: 22px;
    padding-left: 10px;
    box-sizing: border-box;
    border-bottom: 1px solid #42424280;

    background-color: #161c1c;

    cursor: pointer;
    &:hover {
      background-color: #101313;
    }
    .btn {
      height: 14px;

      font-size: 14px;
      i {
        font-size: 14px;
      }
    }
  }
  .item {
    display: flex;
    overflow: hidden;

    width: 100%;
    height: 20px;
    padding-left: 10px;
    border-bottom: 1px solid rgba(66, 66, 66, 0.5);

    color: #24e0f1;

    white-space: nowrap;
    text-overflow: ellipsis;
    &.clickable {
      cursor: pointer;
    }
    &:hover {
      background-color: rgba(255, 255, 255, 0.05);
    }
  }
}
.add-item-btn {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 18px;
  height: 18px;
  margin-left: 18px;
  border: none;
  border-radius: 2px;

  color: rgba(255, 255, 255, 0.7);
  background: transparent;
  &:hover {
    color: #fff;
    background-color: #5f7177b3;
  }
}
</style>
